@layout('layouts/page')

@section('content')
<div class="twelve columns panel">
	<!-- <div class="five columns"> -->
	{{$rolelist}}

		<button id="createRole">Create new role</button>
	<!-- </div> -->
</div>

<div id="addrole" title="Manage role">
  <p class="validateTips">All form fields are required.</p>
	{{ Form::open('user/authenticate', 'POST', array('id' => 'roleForm')) }}
	{{ Form::label('role', 'Role Descriptions') }}
	{{ Form::text('role') }}
	{{ Form::hidden('roleid') }}
	{{ Form::close()}}
</div>
@endsection

@section('scripts')
<script>

	function editRole(id,role){
		$( "#addrole" ).dialog( "open" );
		var isOpen = $( "#addrole" ).dialog( "isOpen" );
		if(isOpen){
			$( "[name='role']" ).val(role);
			$( "[name='roleid']" ).val(id);
		}

	};

  function deleteRole(id){
    $.post("deleterole", "id="+id ).success(function() {
            $( "#users tbody #"+id ).html('');
          });
  }

  $(function() {
    var role = $( "[name='role']" ),
    roleid = $( "[name='roleid']" ),
    allFields = $( [] ).add( role ),
    tips = $( ".validateTips" );
 
    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function notBlank(o) {
      if ( o.val() == 0) {
        o.addClass( "ui-state-error" );
        updateTips( "Value cannot be null" );
        return false;
      } else {
        return true;
      }
    }
 
    $( "#addrole" ).dialog({
      autoOpen: false,
      height: 250,
      width: 350,
      modal: true,
      buttons: {
        "Save": function() {
          var bValid = true,newid = 0,
          desc = role.val(), id=roleid.val();
          allFields.removeClass( "ui-state-error" );
          bValid = bValid && notBlank(role);
          if(bValid){
          	$.post("role", $("#roleForm").serialize(),function(data) {
			      newid = data;
			    }).success(function() { 
			  	if(newid != 0 && newid !=id){
				  	$( "#users tbody" ).append( "<tr>" +
		              "<td>" + newid + "</td>" + 
		              "<td>" + desc + "</td>" + 
		              "<td><a href=\"#\" onclick=\"editRole('" + id + "','" + desc + "')\" id=\"editRole\">Edit</a></td>" + 
		            "</tr>" );
		        }else{	
				  	$( "#users tbody #"+id ).html('');
				  	$( "#users tbody #"+id ).append( 
		              "<td>" + id + "</td>" + 
		              "<td>" + desc + "</td>" + 
		              "<td><a href=\"#\" onclick=\"editRole('" + id + "','" + desc + "')\" id=\"editRole\">Edit</a></td>"  );
			  	}
			  });

			  $( this ).dialog( "close" );
          }
 
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
 
    $( "#createRole" )
      .button()
      .click(function() {
        $( "#addrole" ).dialog( "open" );
		var isOpen = $( "#addrole" ).dialog( "isOpen" );
		if(isOpen){
			$( "[name='role']" ).val('');
			$( "[name='roleid']" ).val('');
		}
      }); 

  });
</script>
@endsection